<template>
  <view class="goods_list">
    <!-- nav区域 -->
    <view class="nav-bar">
      <view class="nav-item">
        <!-- nav头部 -->
        <view class="nav-header">
          <uni-icons type="back" size="26" @click="back"></uni-icons>
          <view class="nav-title">
            <text>{{title}}</text>
          </view>
        </view>
        <view class="nav_tob">
          <text>风格</text>
          <text>排序</text>
          <text>筛选</text>
        </view>
      </view>
    </view>
    <!-- 导航按钮 -->
    <view class="nav-btn">
      <view class="btn">
        <text>布艺沙发</text>
      </view>
      <view class="btn">
        <text>皮质沙发</text>
      </view>
      <view class="btn">
        <text>实木沙发</text>
      </view>
      <view class="btn">
        <text>皮布沙发</text>
      </view>
    </view>
    <!-- 商品内容 -->
    <view class="container-list">
      <view class="container-item" v-for="(item,i) in goodsList" :key="i" @click="gotoGoodsDetail(item)">
        <view class="item-img">
          <image :src="item.url"></image>
        </view>
        <view class="item-msg">
          <view class="msg-name">
            <view class="name-spe" v-if="i % 2 !== 0">
              <text>{{item.text2}}</text>
            </view>
            <view class="name-one" v>
              <text>{{item.uname}}</text>
            </view>
          </view>
          <text class="name-intro">{{item.intro}}</text>
          <text class="name-retail">￥{{item.retail}}</text>
          <view class="msg-spe">
            <view class="name-two">
              <text>{{item.text1}}</text>
            </view>
            <view class="name-two">
              <text>{{item.text2}}</text>
            </view>
            <view :class="[item.text3 !== undefined ? 'name-two' : '']">
              <text>{{item.text3}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsList: [],
        title: ''
      }
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      },
      gotoGoodsDetail(item) {
        const data = JSON.stringify(item)
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?item=" + data
        })
      }
    },
    onLoad(options) {

      const data = uni.getStorageSync('item')
      this.goodsList = data
      // console.log(options);
      this.title = options.index


    }
  }
</script>

<style lang="scss">

  // nav区域
  .nav-bar {
    position: relative;
    height: 222rpx;

    // nav区域
    .nav-item {
      position: absolute;
      top: 68rpx;
      left: 0;
      width: 100%;

      .nav-header {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 56rpx;
        padding-left: 20rpx;
        .nav-title {
          width: 100%;
          display: flex;
          justify-content: center;
          
          text {
            color: #232e3d;
            font-size: 34rpx;
            transform: translateX(-44rpx);
          }

        }
      }

      .nav_tob {
        width: 100%;
        padding: 0 80rpx;
        margin: 56rpx 0 28rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        color: #232e3d;
      }
    }
  }

  // 导航按钮
  .nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 88rpx;
    padding: 23rpx 16rpx;
    margin: 28rpx 0 40rpx 0;
    box-sizing: border-box;
    border-top: 1rpx solid #f1f1f1;
    border-bottom: 1rpx solid #f1f1f1;

    .btn {
      width: 170rpx;
      height: 56rpx;
      background-color: #f1f1f1;
      border-radius: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        font-size: 28rpx;
      }
    }
  }

  // 商品内容
  .container-list {
    padding: 0 24rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .container-item {
      width: 340rpx;
      margin-bottom: 20rpx;
      border: 2rpx solid #f1f1f1;
      border-top: none;
      border-radius: 6rpx;

      .item-img {
        width: 100%;
        height: 340rpx;
        padding: 30rpx 10rpx 30rpx 10rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        background-color: #f1f1f1;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .item-msg {
        display: flex;
        flex-direction: column;
        padding-left: 30rpx;

        .msg-name {
          display: flex;
          align-items: center;

          .name-spe {
            width: 69rpx;
            height: 34rpx;
            display: flex;
            align-items: center;
            border-radius: 17rpx;
            margin-right: 8rpx;
            background-color: #f1f1f1;

            text {
              font-size: 20rpx;
            }
          }

          .name-one {
            text {
              color: #232e3d;
              font-size: 36rpx;
            }
          }
        }

        .name-intro {
          margin: 14rpx 0;
          font-size: 26rpx;
          color: #dadbdd;
        }

        .name-retail {
          font-size: 36rpx;
          color: #232e3d;
        }

        .msg-spe {
          margin: 14rpx 0;
          display: flex;

          .name-two {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60rpx;
            height: 28rpx;
            border-radius: 6px;
            margin-right: 8rpx;
            background-color: #f1f1f1;

            text {
              color: #232e3d;
              font-size: 16rpx;
            }
          }
        }
      }
    }
  }

  .border {
    font-size: 16rpx;
  }
</style>
